<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="hello">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
	*{margin:0;padding:0;}
	ul,ol{list-style:none;}
	a{text-decoration:none;}
	.summary{display: none;}
	
	.wrap{
		width: 650px;
		text-align: center;
		font-size:14px;
		margin:20px auto;
	}
	
	.wrap table{
		width: 100%;
		border:1px solid blue;
		border-collapse:collapse;
	}

	.wrap table tr{
		height: 60px;
		line-height: 60px;		
	}

	.wrap tr td{
		line-height: 60px;
		border:1px solid blue;
	}
	.wrap table tr.header td{
		height: 35px;
		line-height: 35px;	
		color: #fff;
		background-color: pink;
	}

	.count{
		display: inline-block;
		vertical-align: middle;
		width: 150px;
	}
	.count>*{
		float: left;
	}
	.count button{
		width: 35px;
		height: 35px;
	}
	.count span{
		height: 35px;
		width: 80px;
		border:1px solid #ccc;
		display: inline-block;
		line-height: 35px;
		cursor: text;
		box-sizing:border-box;
	}
	.count button.plus{
	
	}

	.wrap p.sum{
		height: 35px;
		line-height: 35px;
		color: #fff;
		background-color: pink;	
		margin-top: 15px;
	}
  </style>
 </head>
 <body>
	<div class="wrap">
		<table>
			<tr class="header">
				<td>商品</td>
				<td>单价</td>
				<td>数量</td>
				<td>小计</td>
			</tr>
			<tr>
				<td></td>
				<td>8</td>
				<td>
					<div class="count">
						<button class="sub">-</button>
						<span>20</span>
						<button class="plus">+</button>
					</div>	
				</td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td>8</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>		

				</td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
		<p class="sum"></p>
	</div>
	<div class="summary">
		1、
	</div>
 </body>
</html>
